<script lang="ts" setup>
import { ref, onUnmounted, onMounted } from 'vue'
import { mobileRules, passwordRules, codeRules } from '@/utils/rules'
import { showToast, showSuccessToast } from 'vant'
import { loginByPassword, sendMobileCode, loginByMobile } from '@/services/user'
import { useUserStore } from '@/stores/modules/user'
import { useRouter, useRoute } from 'vue-router'
import { useMobileCode } from '@/composables'
const mobile = ref('') 
const password = ref('')
//表单提交按钮添加校验
//我同意复选框有自己的数据，把它数据写这,且是个布尔型
const agree = ref(false)
const store = useUserStore()
//获取路由实例
const router = useRouter()
const route = useRoute()

//获取路由信息
const onSubmit = async () => {
    if (!agree.value) return showToast('请勾选协议')
    // console.log('login')
    //这里写密码登录，进行密码登录和验证码短信登录合并
    const res = isPass.value
     ? await loginByPassword(mobile.value, password.value)
     : await loginByMobile(mobile.value, code.value)
    // console.log(res)
    store.setUser(res.data)
    showSuccessToast('登录成功')
    router.replace((route.query.returnUrl as string) || '/user')
}
//短信登录界面切换
const isPass = ref(true)
const code = ref('')
//发送短信验证码
const { onSend, time, form} = useMobileCode(mobile)
//密码的可见与不可见
const isShow = ref(false)

//http%3A%2F%2Fconsult-patients.itheima.net%2Flogin%2Fcallback
const url = 'https://graph.qq.com/oauth2.0/authorize?client_id=102015968&amp;response_type=token&amp;scope=all&amp;redirect_uri=' + encodeURIComponent(import.meta.env.VITE_APP_CALLBACK + '/login/callback')
</script>
<template>
    <div>
      <div class="login-page">
        <cp-nav-bar right-text="注册"></cp-nav-bar>
        <!-- 头部 -->
        <div class="login-head">
            <h3>{{isPass ? '密码登录' : '短信验证码登录'}}</h3>
            <a href="javascript:;">
                <span @click="isPass = !isPass">{{isPass ? '短信验证码登录' : '密码登录'}}</span>
                <van-icon name="arrow"></van-icon>
            </a>
        </div>
        <!-- 表单 -->
        <!-- autocomplete="off" 的作用是 禁用浏览器对表单的自动填充和自动完成功能 -->
        <van-form autocomplete="off" @submit="onSubmit" ref="form">
            <van-field 
              name="mobile"
              v-model="mobile"
              :rules="mobileRules"
              placeholder="请输入手机号" 
              type="tel">
            </van-field>
            <van-field 
              v-if="isPass"
              v-model="password"
              :rules="passwordRules"
              placeholder="请输入密码" 
              :type="isShow ? 'text' : 'password'">
              <template #button>
                <cp-icon :name="`login-eye-${isShow ? 'on' : 'off'}`" style="margin-right" @click="isShow = !isShow"></cp-icon>
                <!-- <svg aria-hidden="true"  class="cp-icon">
                    <use href="#icon-login-eye-off"  />
                </svg> -->
              </template>
            </van-field>
            <van-field 
              v-else
              :rules="codeRules"
              placeholder="短信验证码" 
              v-model="code">
              <template #button>
                <span class="btn-send" @click="onSend" :class="{active: time> 0}">{{time > 0 ? `${time}s后再次发送` : '发送验证码'}}</span>
              </template>
              </van-field>
            <div class="cp-cell">
                <van-checkbox v-model="agree">
                    <span>我已同意</span>
                    <a href="javascript:;">用户协议</a>
                    <span>及</span>
                    <a href="javascript:;">隐私条款</a>
                </van-checkbox>
            </div>
            <div class="cp-cell">
                <!-- native-type按钮原始类型 -->
                <van-button block round type="primary" native-type="submit">登录</van-button>
            </div>
            <div class="cp-cell">
                <a href="javascript:;">忘记密码？</a>
            </div>
            <!-- 底部 -->
            <div class="login-other">
                <!-- divider分割线 -->
                <van-divider>第三方登录</van-divider>
                <a @click="store.setReturnUrl(route.query.returnUrl as string)" class="icon" :href="url">
                    <img src="@/assets/qq.svg" alt="">
                </a>
            </div>
        </van-form>
      </div>
    </div>
</template>

<style lang="scss" scoped>
@use '@/styles/login.scss' as *;
</style>